import { useEffect, useRef, useState } from "react";
import { Button, Divider, Input } from "antd";
import type { InputRef } from "antd";

type LogInfoProps = {
  value?: string;
};

const LogInfo = (props: LogInfoProps) => {
  const { value } = props;
  const inputRef = useRef<any>(null);
  const [log, setLog] = useState<string>("123\n456");

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.scrollTop = inputRef.current.scrollHeight;
    }
  }, [value]);
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <Divider
        orientation="left"
        style={{ borderColor: "#f4a9a9", margin: "6px 0" }}
        plain
      >
        日志
      </Divider>
      <Input.TextArea
        ref={(node) => {
          if (node) {
            inputRef.current = node.resizableTextArea
              ?.textArea as HTMLTextAreaElement;
          }
        }}
        style={{ flex: 1 }}
        autoSize
        value={value}
        // onChange={(e) => {
        //   console.log(e.target.value);
        //   setLog(e.target.value);
        // }}
      />
    </div>
  );
};

export default LogInfo;
